<template>
  <div class="edit_wrap">
    <nav-bar style="margin-bottom: 3.333vw;"></nav-bar>
    <!-- 修改项 -->
    <div class="upload_file">
      <van-uploader class="upload_img" preview-size="100vw" :after-read="afterRead" />
      <edit-banner left="头像">
        <img :src="model.user_img" slot="right" v-if="model.user_img" alt="">
        <img src="@/assets/noface.jpg" slot="right" v-else alt="">
      </edit-banner>
    </div>
    <edit-banner left="昵称" @bannerClick="show = true">
      <a href="javascript:;" slot="right">{{model.name}}</a>
    </edit-banner>
    <edit-banner left="账号">
      <a href="javascript:;" slot="right">{{model.username}}</a>
    </edit-banner>
    <edit-banner left="性别" @bannerClick="showGender = true">
      <a href="javascript:;" slot="right">{{model.gender ? '男' : '女'}}</a>
    </edit-banner>
    <edit-banner left="个性签名" @bannerClick="showDesc = true">
      <a href="javascript:;" slot="right">{{model.user_desc}}</a>
    </edit-banner>
    <!-- 返回按钮 -->
    <div class="edit_back" @click="$router.back()">返回个人中心</div>

    <!-- 修改昵称弹出框 -->
    <van-dialog v-model="show" title="昵称" show-cancel-button @confirm="confirmNameClick" @cancel="content = ''">
      <van-field v-model="content" autofocus placeholder="请修改昵称" />
    </van-dialog>
    <!-- 修改个性签名弹出框 -->
    <van-dialog v-model="showDesc" title="个性签名" show-cancel-button @confirm="confirmDescClick" @cancel="content = ''">
      <van-field v-model="content" autofocus placeholder="请修改个性签名" type="textarea" />
    </van-dialog>
    <!-- 动作面板 -->
    <van-action-sheet
     v-model="showGender"
     cancel-text="取消选择"
     :actions="actions"
     @select="onSelect" />
  </div>
</template>

<script>
import NavBar from '../components/common/NavBar.vue'
import EditBanner from '../components/common/EditBanner.vue'
export default {
  data () {
    return {
      model: {},
      show: false,
      showDesc: false,
      showGender: false,
      content: '',
      actions: [
        { name: '男', val: 1 },
        { name: '女', val: 0 }
      ]
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      // 发送获取用户信息请求
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      if (res.status !== 200) return this.$msg.fail('获取用户信息失败')
      this.model = res.data[0]
    },
    async afterRead (file) {
      // console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await this.$http.post('/upload', formData)
      // console.log(res)
      this.model.user_img = res.data.url
      this.modifyUserInfo()
    },
    // 修改用户个人信息
    async modifyUserInfo () {
      const res = await this.$http.post('/update/' + localStorage.getItem('id'), this.model)
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('个人信息修改失败')
      this.$msg.success('个人信息修改成功')
    },
    // 点击修改昵称对话框确定按钮
    confirmNameClick () {
      this.model.name = this.content
      this.modifyUserInfo()
      this.content = ''
    },
    // 点击修改个性签名对话框确定按钮
    confirmDescClick () {
      this.model.user_desc = this.content
      this.modifyUserInfo()
      this.content = ''
    },
    // 选择性别触发事件
    onSelect (item) {
      // console.log(item)
      this.model.gender = item.val
      this.modifyUserInfo()
      this.showGender = false
    }
  },
  components: {
    NavBar,
    EditBanner
  }
}
</script>

<style lang="less" scoped>
.edit_wrap img {
  width: 12.5vw;
  height: 12.5vw;
  border-radius: 50%;
}
.edit_wrap a {
  color: #333;
}

.upload_file {
  position: relative;
  overflow: hidden;
  .upload_img {
    position: absolute;
    opacity: 0;
  }
}

.edit_back {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  color: #999;
}
</style>
